<template>
    <div class="ui dimmer page transition" :class="{active: active}" @click="oncancel">
        <div class="ui modal visible active">
            <div class="header"><i class="icon remove" @click="oncancel"></i></div>
            <div class="content" @click.stop="">
              <h3>{{stock.date}}</h3>
                <div class="ui bottom attached tab segment active">
				  <template v-for='item in dateShowContent' v-if='!item.disabled'>
					<template v-if='item.child'>
						<span class="parent-label">{{item.label}}</span>
						<div class="fields inline" >
							<div class="ui field input" >
							  <label v-for='child in item.child'>{{child.label}}：<input type="number" :placeholder="`请输入${child.label}`" v-model='stock[item.name][child.name]'></label>
							</div>
						</div>
					</template>
					<template v-else>
						<div class="field">
							<div class="ui input">
								<label>{{item.label}}：<input type="number" :placeholder="`请输入${item.label}`" v-model='stock[item.name]'></label>
							</div>
						</div>
					</template>
				  </template>
                  <!-- <div class="ui sale-allow">
                      <label v-for=""><input type="radio" value="1" class="hidden" v-model="stock.ol">
                          可售卖</label>
                      <label><input type="radio" v-model="stock.ol" value="0" class="hidden">
                          不可售卖</label>
                  </div> -->
                  <div class="ui  vertical masthead center aligned segment">
                      <button class="ui secondary button" @click='onsubmit'>确认 </button>
                      <button class="ui button" @click="oncancel">取消 </button>
                  </div>
                </div>

            </div>
        </div>

    </div>
</template>
<script>
    import tool from 'src/util/tool';
    import util from '_util/index';

    export default {
        data() {
            return {
              stock:{
                // ol:0
              }
            }
        },
        components: {

        },
        methods: {
          checkInput(){
            //检查输入
			let arrayBool = true;
			this.dateShowContent.forEach(item =>{
				if(!item.disabled){
					if(item.child){
						item.child.forEach(child =>{
							if(!(this.stock[item.name][child.name]*1>=0)){
								util.showMsg(this,'error',`请输入正确的${child.label}`);
								arrayBool =false;
							}
						})
					}else{
						if(!(this.stock[item.name]*1>=0)){
							util.showMsg(this,'error',`请输入正确的${item.label}`);
							arrayBool =false;
						}
					}
				}
			})
			if(Object.keys(this.stock).indexOf('sale_price')>-1){
				let fc_serv = this.stock.fc_serv||0,
				fc_serv_up = this.stock.fc_serv_up||0,
				fc_sp = this.stock.fc_sp||0,
				sale_price = this.stock.sale_price||0;
				if((fc_serv*1+fc_serv_up*1+fc_sp*1)>sale_price){
					arrayBool = false;
					util.showMsg(this, 'error', `分成不得大于售价`);
				}
			}
			return arrayBool
          },
          oncancel(){
			  this.stock={
                ol:0
              }
            this.$emit('oncancel')
          },
          onsubmit(){
            if(this.checkInput()){
                this.$emit('onsubmit',this.stock);
				this.stock={
				  ol:0
				}
            }
          },
          updateStock(){
              if(this.singleStockData){
				  if (this.dateShowContent) {
		              this.dateShowContent.forEach(item => {
		  				if(!item.disabled||this.stock[item.name]){
		  					if(item.child){
		  						this.$set(this.stock, item.name, {})
		  						item.child.forEach(child =>{
									if(!this.stock[item.name][child.name]&&!item.disabled){
										// this.$set(this.stock[item.name], child.name, 0)
			  					    }
		  						})
		  					}else{
								if(!this.stock[item.name]&&!item.disabled){
									this.$set(this.stock,item.name,0)
		  					    }
		  					}
		  				}
		              })
		          }
                  this.stock = {...this.stock,...this.singleStockData}
              }
          }
        },
        props: {
            active: {
                type: Boolean,
                default(){
                    return false
                }
            },
            singleStockData:{},
			dateShowContent:{
                type: Array,
                default(){
                    return []
                }
            },
        },
        watch: {
            // singleStockData:{
            //     handler(){
            //         this.updateStock()
            //     },
            //     deep:true
            // },
			active(){
				this.updateStock()
			}
        },
        computed: {

        },
        created(){
            this.updateStock();
        }
    }
</script>
<style lang="less" scoped>
    @import "../../../common/style/mixin";
    .ui.dimmer > .ui.modal {
        background-color: transparent;
        height: 100%;
        position: relative;
        margin: 0 auto !important;
        left: inherit;
        top: inherit;
        @_top: 15%;
        @_bottom: 3%;
        .field,.fields{
          margin: 5px 0;
		  label{
			  margin-right: 5px
		  }
        }
        .sale-allow{
          margin-top: 20px;
          label{margin-right:20px}
        }
        .weekdayInput{
          margin-right:10px
        }
		.parent-label {
			margin-top: 15px;
			display: block;
			font-weight: 500;
		}
        .header {
            background-color: transparent;
            text-align: right;
            padding: 20px 0;
            position: absolute;
            left: 0;
            right: 0;
            top: @_top;
            margin-top: -66px;
            .icon {
                color: #fff;
                cursor: pointer;
            }
        }
        .content {
            position: absolute;
            top: @_top;
            height: auto;
            max-height: 100% - @_bottom - @_top;
            overflow: auto;
        }
    }
</style>
